<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<!--标准mui.css-->
		<style>
			.mui-content-padded {
				padding: 10px;
			}
			body,
			body .mui-content {
				background-color: #fff !important;
			}
			#total {
				-webkit-user-select: text;
				text-align: right;
				padding: 0 1em;
				border: 0px;
				border-bottom: 1px solid #007aff;
				border-radius: 0;
				font-size: 16px;
				width: 30%;
				outline: none;
			}
			textarea{
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">cloud Pay（云端支付）</h1>
		</header>
		<div id="dcontent" class="mui-content">
			<div class="mui-content-padded">
				<p style="text-indent: 22px;">
					这是mui无后端开发示例，集成BeeCloud云支付服务，通过js连接云端支付服务器，实现支付功能的全流程开发。
					如下为一个支付示例，为DCloud提供的免费、开源软件进行捐赠吧
				</p>
				<div style="padding: 0 1em;text-align:center">
					捐赠金额：
					<input id="total" type="number" value="1.0" style="text-align:center" /> 元
				</div>
				<div id='WX_APP' class="mui-btn mui-btn-blue mui-btn-block pay">
					微信支付
				</div>
				<div id='ALI_APP' class="mui-btn mui-btn-blue mui-btn-block pay">
					支付宝钱包
				</div>
				    <ul class="mui-table-view">
				        <li class="mui-table-view-cell">
				                 支付方式: <span id="channel"></span>
				        </li>
				        <li class="mui-table-view-cell">
				                订单号: <span id="bill_no"></span>
				        </li>
				        <li class="mui-table-view-cell">
				                 支付金额: <span id="total_fee"></span>
				        </li>
				        <li class="mui-table-view-cell">
				                 支付状态:<span id="status"></span>
				        </li>
				        <textarea name="" id="status_msg" cols="20" rows="5"></textarea>
				    </ul>
			</div>
		</div>
 
	</body>
	<script src="../js/beecloud.js">
	</script>
	<script type="text/javascript">
		mui('.mui-content-padded').on('tap','.pay',function () {
			beecloudPay(this.id);
			document.getElementById("channel").innerHTML = this.id
			document.getElementById("total_fee").innerHTML = document.getElementById('total').value;
			document.getElementById("bill_no").innerHTML = beecloud.genBillNo();
		}) 
		function beecloudPay(bcChannel) {
			/*
			 * 构建支付参数
			 * 
			 * app_id: BeeCloud控制台上创建的APP的appid，必填 
			 * title: 订单标题，32个字节，最长支持16个汉字；必填
			 * total_fee: 支付金额，以分为单位，大于0的整数，必填
			 * bill_no: 订单号，8~32位数字和/或字母组合,确保在商户系统中唯一，必填
			 * optional: 扩展参数,可以传入任意数量的key/value对来补充对业务逻辑的需求;此参数会在webhook回调中返回; 选填
			 * bill_timeout: 订单失效时间,必须为非零正整数，单位为秒，必须大于360。选填 
			 */
			var payData = {
				app_id: "44f01a13-965f-4b27-ba9f-da678b47f3f5",
				channel: bcChannel,  
				title: "DCloud项目捐赠",  
				total_fee: document.getElementById('total').value * 100, 
				bill_no: beecloud.genBillNo(),    
				optional: {'uerId':'beecloud','phone':'4006280728'},  
				bill_timeout: 360 
			};
			/*
			 *  发起支付
			 *  payData: 支付参数
			 *  cbsuccess: 支付成功回调
			 *  cberror: 支付失败回调
			 */
			beecloud.payReq(payData, function(result) {
				document.getElementById("status").innerHTML = 'success';
				document.getElementById("status").style.color = 'green'
				document.getElementById("status_msg").innerHTML = "-------- 支付成功 --------" +"\n感谢您的支持,我们会继续努力完善产品";
				console.log(result);
			}, function(e) {
				document.getElementById("status").innerHTML = 'failed';
				document.getElementById("status").style.color = 'red'
				document.getElementById("status_msg").innerHTML = "-------- 支付失败 --------\n" +"错误码："+ e.code + '\n' + e.message;
			});
		}
	</script>

</html>